/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import '../base-ui/menu/LitMainMenu';
import '../base-ui/icon/LitIcon';
import '../base-ui/menu/LitMainMenuGroup';
import '../base-ui/menu/LitMainMenuItem';
import './main-panel/SpUserStatisticsPanel';
import './main-panel/SpVisitStatisticsPanel';
import './main-panel/SpAiStatisticsPanel'
import { BaseElement, element } from '../base-ui/BaseElement';
import { LitMainMenu, MenuItem } from '../base-ui/menu/LitMainMenu';
import { LitMainMenuGroup } from '../base-ui/menu/LitMainMenuGroup';
import { LitMainMenuItem } from '../base-ui/menu/LitMainMenuItem';
import { SpUserStatisticsPanel } from './main-panel/SpUserStatisticsPanel';
import { SpVisitStatisticsPanel } from './main-panel/SpVisitStatisticsPanel';
import { SpStatisticsHttpUtil } from './util/SpStatisticsHttpUtil';
import { SpAiStatisticsPanel } from './main-panel/SpAiStatisticsPanel';

@element('sp-statistics-application')
export class SpStatisticsApplication extends BaseElement {
  private rootEL: HTMLDivElement | undefined | null;

  private mainMenu: LitMainMenu | undefined;

  private currentItem: LitMainMenuItem | undefined | null;

  static get observedAttributes() {
    return ['subsection'];
  }

  initHtml(): string {
    SpStatisticsHttpUtil.initStatisticsServerConfig();
    return `
        <style>
        :host{

        }
        .root{
            display: grid;
            grid-template-rows: min-content 1fr;
            grid-template-columns: min-content 1fr;
            grid-template-areas: 'm s'
                                 'm b';
            height: 100vh;
            width: 100vw;
            overflow-x: hidden;
        }
        .menu{
            grid-area: m;
            /*transition: all 0.2s;*/
            box-shadow: 4px 0 20px rgba(0,0,0,0.05);
            z-index: 2000;
        }
        .item-head{
            z-index: 10;
            position: relative;
            display: block;
            height: 50px;
        }
        .progress{
            bottom: 0;
            position: absolute;
            height: 1px;
            left: 0;
            right: 0;
        }
        ::placeholder {
          color: #b5b7ba;
          font-size: 1em;
        }
        .search input::placeholder {
          color: #b5b7ba;
          font-size: 1em;
        }
        .content{
            grid-area: b;
            background-color: #F1F3F4;
            height: 100%;
            overflow: auto;
            position:relative;
            display: flex;
        }
        .sidebar-button{
            position: absolute;
            top: 0;
            left: 0;
            background-color: #FFFFFF;
            border-radius: 0 5px 5px 0;
            width: 48px;
            height: 47px;
            display: flex;
            align-content: center;
            justify-content: center;
            cursor: pointer;
        }
        :host{
            font-size: inherit;
            display: inline-block;
            transition: .3s;
         }
         :host([spin]){
            animation: rotate 1.75s linear infinite;
         }
         @keyframes rotate {
            to{
                transform: rotate(360deg);
            }
         }
         .icon{
            display: block;
            width: 1em;
            height: 1em;
            margin: auto;
            fill: currentColor;
            overflow: hidden;
            font-size: 20px;
            color: #4D4D4D;
         }

         .current-item {
            height: 60px;
            font-family: Helvetica-Bold,serif;
            font-size: 16px;
            line-height: 28px;
            font-weight: 700;
         }
        </style>
        <div class="root">
            <lit-main-menu id="main-menu" class="menu" data=''></lit-main-menu>
            <div class="item-head">
                <div class="search" style="position: relative;">
                    <div class="sidebar-button" style="width: 0">
                        <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">
                             <use id="use" xlink:href="./base-ui/icon.svg#icon-menu"></use>
                        </svg>
                    </div>
                </div>
                <lit-main-menu-item class="current-item" icon="" title=""></lit-main-menu-item>
            </div>
            <div id="app-content" class="content">
                <sp-user-statistics-panel id="user-root-statistics" style="width:100%;height:100%;overflow-y:auto;overflow-x:hidden;visibility:visible;top:0;left:0;right:0;bottom:0;position:absolute;"></sp-user-statistics-panel>
                <sp-visit-statistics-panel id="visit-root-statistics" style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0;left:0;right:0;bottom:0;position:absolute;"></sp-visit-statistics-panel>
                <sp-ai-statistics-panel id="ai-root_statistics" style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0;left:0;right:0;bottom:0;position:absolute;"></sp-ai-statistics-panel>
            </div>
        </div>
        `;
  }

  initElements() {
    let that = this;
    // root根节点
    this.rootEL = this.shadowRoot!.querySelector<HTMLDivElement>('.root');
    // 主菜单
    this.mainMenu = this.shadowRoot?.querySelector('#main-menu') as LitMainMenu;
    // 当前head信息
    this.currentItem = this.shadowRoot!.querySelector<LitMainMenuItem>('.current-item');
    this.currentItem!.style.pointerEvents = 'none';
    // 界面item
    let userStatisticsPanel = this.shadowRoot!.querySelector<SpUserStatisticsPanel>('#user-root-statistics');
    let visitStatisticsPanel = this.shadowRoot!.querySelector<SpVisitStatisticsPanel>('#visit-root-statistics');
    let aiStatisticsPanel = this.shadowRoot!.querySelector<SpAiStatisticsPanel>('#ai-root_statistics');
    let itemPanels: any[] = [userStatisticsPanel, visitStatisticsPanel,aiStatisticsPanel];

    // 侧边栏
    let icon: HTMLDivElement | undefined | null = this.shadowRoot
      ?.querySelector('#main-menu')
      ?.shadowRoot?.querySelector('div.header > div');
    let sidebarButton: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector('.sidebar-button');
    sidebarButton!.style.pointerEvents = 'auto';
    sidebarButton?.addEventListener('click', () => {
      let menuButton: HTMLElement | undefined | null = this.shadowRoot?.querySelector('.sidebar-button');
      let menu: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector('#main-menu');
      if (menu) {
        menu.style.display = `flex`;
      }
      if (menuButton) {
        menuButton.style.width = `0px`;
      }
      this.currentItem!.style.display = 'block';
    });

    icon!.addEventListener('click', () => {
      let menuButton: HTMLElement | undefined | null = this.shadowRoot?.querySelector('.sidebar-button');
      let menu: HTMLElement | undefined | null = this.shadowRoot?.querySelector('#main-menu');
      if (menu) {
        menu.style.display = `none`;
      }
      if (menuButton) {
        menuButton.style.width = `48px`;
      }
      this.currentItem!.style.display = 'none';
    });

    this.currentItem!.setAttribute('icon', 'user-statistics');
    this.currentItem!.setAttribute('title', '用户统计');

    function showContent(showItem: MenuItem, showNode: HTMLElement) {
      that.currentItem!.setAttribute('icon', showItem.icon);
      that.currentItem!.setAttribute('title', showItem.title);
      itemPanels.forEach((node) => {
        if (node === showNode) {
          showNode.style.visibility = 'visible';
        } else {
          node!.style.visibility = 'hidden';
          node!.clearStatisticsPanel();
        }
      });
    }

    this.mainMenu.menus = [
      {
        collapsed: false,
        title: '',
        describe: '',
        children: [
          {
            title: '用户统计',
            icon: 'user-statistics',
            clickHandler: function (item: MenuItem) {
              showContent(item!, userStatisticsPanel!);
              userStatisticsPanel!.refreshHomePage();
            },
          },
          {
            title: '页面访问统计',
            icon: 'page-summary',
            clickHandler: function (item: MenuItem) {
              showContent(item!, visitStatisticsPanel!);
              visitStatisticsPanel!.initData();
            },
          },
          {
            title: 'AI使用统计',
            icon: 'page-summary',
            clickHandler: function (item: MenuItem) {
              showContent(item!, aiStatisticsPanel!);
              aiStatisticsPanel!.initData();
            },
          },
        ],
      },
    ];
    let litMenuGroup = this.mainMenu?.shadowRoot?.querySelector('lit-main-menu-group') as LitMainMenuGroup;
    litMenuGroup.setAttribute('nocollapsed', '');
  }

  connectedCallback() {}
}
